<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
#video {
    height: 100%;
    background: black;
    flex-grow: 1;
    min-height: 0;
}
#controls {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 10px;
    flex-direction: column;
}

#device {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: column;
    gap: 10px 20px
}

.item {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 200px;
    gap: 20px;
}

#submit_line {
    margin-top: 20px;
}

#error-message {
    text-align: center;
}
select {
    width: 200px;
}
</style>
</head>
<body>

<video id="video" muted controls autoplay playsinline></video>
<div id="controls">
    <div id="initializing" style="display: block;">
        initializing
    </div>

    <div id="device" style="display: none">
        <div class="item">
            <label for="video_device">video device</label>
            <select id="video_device">
                <option value="none">none</option>
            </select>
        </div>

        <div class="item">
            <label for="video_codec">video codec</label>
            <select id="video_codec">
            </select>
        </div>

        <div class="item">
            <label for="video_bitrate">video bitrate (kbps)</label>
            <input id="video_bitrate" type="text" value="10000" />
        </div>

        <div class="item">
            <label for="video_framerate">video framerate</label>
            <input id="video_framerate" type="text" value="30" />
        </div>

        <div class="item">
            <label for="video_width">video width</label>
            <input id="video_width" type="text" value="1920" />
        </div>

        <div class="item">
            <label for="video_height">video height</label>
            <input id="video_height" type="text" value="1080" />
        </div>

        <div class="item">
            <label for="audio_device">audio device</label>
            <select id="audio_device">
                <option value="none">none</option>
            </select>
        </div>

        <div class="item">
            <label for="audio_codec">audio codec</label>
            <select id="audio_codec">
            </select>
        </div>

        <div class="item">
            <label for="audio_bitrate">audio bitrate (kbps)</label>
            <input id="audio_bitrate" type="text" value="32" />
        </div>

        <div class="item">
            <label for="audio_voice">optimize for voice</label>
            <input id="audio_voice" type="checkbox" checked>
        </div>

        <div class="item"></div>
    </div>

    <div id="submit_line" style="display: none">
        <button id="publish_confirm">publish</button>
    </div>

    <div id="transmitting" style="display: none;">
        publishing
    </div>

    <div id="error" style="display: none;">
        <span id="error-message"></span>
    </div>
</div>

<script>
const INITIALIZING = 0;
const DEVICE = 1;
const TRANSMITTING = 2;
const ERROR = 3;

let state = INITIALIZING;
let errorMessage = '';

const videoForm = {
    device: document.getElementById("video_device"),
    codec: document.getElementById("video_codec"),
    bitrate: document.getElementById("video_bitrate"),
    framerate: document.getElementById("video_framerate"),
    width: document.getElementById("video_width"),
    height: document.getElementById("video_height")
}

const audioForm = {
    device: document.getElementById("audio_device"),
    codec: document.getElementById("audio_codec"),
    bitrate: document.getElementById("audio_bitrate"),
    voice: document.getElementById("audio_voice"),
}

const url = new URL(window.location.href);

const initializeInputsFromUrl = () => {
    const inputs = [...Object.values(videoForm), ...Object.values(audioForm)]

    for (const input of inputs) {
        const value = url.searchParams.get(input.id);
        if (value) {
            if (input instanceof HTMLInputElement && input.type === "text") {
                input.value = value;
            }

            if (input instanceof HTMLInputElement && input.type === "checkbox") {
                input.checked = value === "true";
            }

            if (input instanceof HTMLSelectElement) {
                input.value = value
            }
        }
    }
}

const registerInputsToUrl = () => {
    const inputs = [...Object.values(videoForm), ...Object.values(audioForm)]

    for (const input of inputs) {
        if (input instanceof HTMLInputElement && input.type === "text") {
            input.addEventListener("input", () => {
                url.searchParams.set(input.id, input.value);
                window.history.replaceState(null, null, url);
            })
        }

        if (input instanceof HTMLInputElement && input.type === "checkbox") {
            input.addEventListener("input", () => {
                url.searchParams.set(input.id, input.checked);
                window.history.replaceState(null, null, url);
            })
        }

        if (input instanceof HTMLSelectElement) {
            input.addEventListener("input", () => {
                url.searchParams.set(input.id, input.value);
                window.history.replaceState(null, null, url);
            })
        }
    }
}

const render = () => {
    for (const el of ['initializing', 'device', 'submit_line', 'transmitting', 'error']) {
        document.getElementById(el).style.display = 'none';
    }

    switch (state) {
    case DEVICE:
        document.getElementById('device').style.display = 'grid';
        document.getElementById('submit_line').style.display = 'block';
        initializeInputsFromUrl();
        registerInputsToUrl();
        break;

    case TRANSMITTING:
        document.getElementById('transmitting').style.display = 'flex';
        break;

    case ERROR:
        document.getElementById('error').style.display = 'flex';
        document.getElementById('error-message').innerHTML = 'error: ' + errorMessage;
        break;
    }
};

const restartPause = 2000;

const unquoteCredential = (v) => (
    JSON.parse(`"${v}"`)
);

const linkToIceServers = (links) => (
    (links !== null) ? links.split(', ').map((link) => {
        const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i);
        const ret = {
            urls: [m[1]],
        };

        if (m[3] !== undefined) {
            ret.username = unquoteCredential(m[3]);
            ret.credential = unquoteCredential(m[4]);
            ret.credentialType = "password";
        }

        return ret;
    }) : []
);

const parseOffer = (offer) => {
    const ret = {
        iceUfrag: '',
        icePwd: '',
        medias: [],
    };

    for (const line of offer.split('\r\n')) {
        if (line.startsWith('m=')) {
            ret.medias.push(line.slice('m='.length));
        } else if (ret.iceUfrag === '' && line.startsWith('a=ice-ufrag:')) {
            ret.iceUfrag = line.slice('a=ice-ufrag:'.length);
        } else if (ret.icePwd === '' && line.startsWith('a=ice-pwd:')) {
            ret.icePwd = line.slice('a=ice-pwd:'.length);
        }
    }

    return ret;
};

const generateSdpFragment = (offerData, candidates) => {
    const candidatesByMedia = {};
    for (const candidate of candidates) {
        const mid = candidate.sdpMLineIndex;
        if (candidatesByMedia[mid] === undefined) {
            candidatesByMedia[mid] = [];
        }
        candidatesByMedia[mid].push(candidate);
    }

    let frag = 'a=ice-ufrag:' + offerData.iceUfrag + '\r\n'
        + 'a=ice-pwd:' + offerData.icePwd + '\r\n';

    let mid = 0;

    for (const media of offerData.medias) {
        if (candidatesByMedia[mid] !== undefined) {
            frag += 'm=' + media + '\r\n'
                + 'a=mid:' + mid + '\r\n';

            for (const candidate of candidatesByMedia[mid]) {
                frag += 'a=' + candidate.candidate + '\r\n';
            }
        }
        mid++;
    }

    return frag;
};

const setCodec = (section, codec) => {
    const lines = section.split('\r\n');
    const lines2 = [];
    const payloadFormats = [];

    for (const line of lines) {
        if (!line.startsWith('a=rtpmap:')) {
            lines2.push(line);
        } else {
            if (line.toLowerCase().includes(codec)) {
                payloadFormats.push(line.slice('a=rtpmap:'.length).split(' ')[0]);
                lines2.push(line);
            }
        }
    }

    const lines3 = [];

    for (const line of lines2) {
        if (line.startsWith('a=fmtp:')) {
            if (payloadFormats.includes(line.slice('a=fmtp:'.length).split(' ')[0])) {
                lines3.push(line);
            }
        } else if (line.startsWith('a=rtcp-fb:')) {
            if (payloadFormats.includes(line.slice('a=rtcp-fb:'.length).split(' ')[0])) {
                lines3.push(line);
            }
        } else {
            lines3.push(line);
        }
    }

    return lines3.join('\r\n');
};

const setVideoBitrate = (section, bitrate) => {
    let lines = section.split('\r\n');

    for (let i = 0; i < lines.length; i++) {
        if (lines[i].startsWith('c=')) {
            lines = [...lines.slice(0, i+1), 'b=TIAS:' + (parseInt(bitrate) * 1024).toString(), ...lines.slice(i+1)];
            break
        }
    }

    return lines.join('\r\n');
};

const setAudioBitrate = (section, bitrate, voice) => {
    let opusPayloadFormat = '';
    let lines = section.split('\r\n');

    for (let i = 0; i < lines.length; i++) {
        if (lines[i].startsWith('a=rtpmap:') && lines[i].toLowerCase().includes('opus/')) {
            opusPayloadFormat = lines[i].slice('a=rtpmap:'.length).split(' ')[0];
            break;
        }
    }

    if (opusPayloadFormat === '') {
        return section;
    }

    for (let i = 0; i < lines.length; i++) {
        if (lines[i].startsWith('a=fmtp:' + opusPayloadFormat + ' ')) {
            if (voice) {
                lines[i] = 'a=fmtp:' + opusPayloadFormat + ' minptime=10;useinbandfec=1;maxaveragebitrate='
                    + (parseInt(bitrate) * 1024).toString();
            } else {
                lines[i] = 'a=fmtp:' + opusPayloadFormat + ' maxplaybackrate=48000;stereo=1;sprop-stereo=1;maxaveragebitrate'
                    + (parseInt(bitrate) * 1024).toString();
            }
        }
    }

    return lines.join('\r\n');
};

const editAnswer = (answer, videoCodec, audioCodec, videoBitrate, audioBitrate, audioVoice) => {
    const sections = answer.sdp.split('m=');

    for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        if (section.startsWith('video')) {
            sections[i] = setVideoBitrate(setCodec(section, videoCodec), videoBitrate);
        } else if (section.startsWith('audio')) {
            sections[i] = setAudioBitrate(setCodec(section, audioCodec), audioBitrate, audioVoice);
        }
    }

    answer.sdp = sections.join('m=');
};

class Transmitter {
    constructor(stream) {
        this.stream = stream;
        this.pc = null;
        this.restartTimeout = null;
        this.sessionUrl = '';
        this.queuedCandidates = [];
        this.start();
    }

    start() {
        console.log("requesting ICE servers");

        fetch(new URL('whip', url) + url.search, {
            method: 'OPTIONS',
        })
            .then((res) => this.onIceServers(res))
            .catch((err) => {
                console.log('error: ' + err);
                this.scheduleRestart();
            });
    }

    onIceServers(res) {
        this.pc = new RTCPeerConnection({
            iceServers: linkToIceServers(res.headers.get('Link')),
            // https://webrtc.org/getting-started/unified-plan-transition-guide
            sdpSemantics: 'unified-plan',
        });

        this.pc.onicecandidate = (evt) => this.onLocalCandidate(evt);
        this.pc.oniceconnectionstatechange = () => this.onConnectionState();

        this.stream.getTracks().forEach((track) => {
            this.pc.addTrack(track, this.stream);
        });

        this.pc.createOffer()
            .then((offer) => this.onLocalOffer(offer));
    }

    onLocalOffer(offer) {
        this.offerData = parseOffer(offer.sdp);
        this.pc.setLocalDescription(offer);

        console.log("sending offer");

        fetch(new URL('whip', url) + url.search, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/sdp',
            },
            body: offer.sdp,
        })
            .then((res) => {
                if (res.status !== 201) {
                    throw new Error('bad status code');
                }
                this.sessionUrl = new URL(res.headers.get('location'), url.href).toString();
                return res.text();
            })
            .then((sdp) => this.onRemoteAnswer(new RTCSessionDescription({
                type: 'answer',
                sdp,
            })))
            .catch((err) => {
                console.log('error: ' + err);
                this.scheduleRestart();
            });
    }

    onConnectionState() {
        if (this.restartTimeout !== null) {
            return;
        }

        console.log("peer connection state:", this.pc.iceConnectionState);

        switch (this.pc.iceConnectionState) {
        case "disconnected":
            this.scheduleRestart();
        }
    }

    onRemoteAnswer(answer) {
        if (this.restartTimeout !== null) {
            return;
        }
        editAnswer(
            answer,
            videoForm.codec.value,
            audioForm.codec.value,
            videoForm.bitrate.value,
            audioForm.bitrate.value,
            audioForm.voice.checked,
        );

        this.pc.setRemoteDescription(answer);

        if (this.queuedCandidates.length !== 0) {
            this.sendLocalCandidates(this.queuedCandidates);
            this.queuedCandidates = [];
        }
    }

    onLocalCandidate(evt) {
        if (this.restartTimeout !== null) {
            return;
        }

        if (evt.candidate !== null) {
            if (this.sessionUrl === '') {
                this.queuedCandidates.push(evt.candidate);
            } else {
                this.sendLocalCandidates([evt.candidate])
            }
        }
    }

    sendLocalCandidates(candidates) {
        fetch(this.sessionUrl + window.location.search, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/trickle-ice-sdpfrag',
                'If-Match': '*',
            },
            body: generateSdpFragment(this.offerData, candidates),
        })
            .then((res) => {
                if (res.status !== 204) {
                    throw new Error('bad status code');
                }
            })
            .catch((err) => {
                console.log('error: ' + err);
                this.scheduleRestart();
            });
    }

    scheduleRestart() {
        if (this.restartTimeout !== null) {
            return;
        }

        if (this.pc !== null) {
            this.pc.close();
            this.pc = null;
        }

        this.restartTimeout = window.setTimeout(() => {
            this.restartTimeout = null;
            this.start();
        }, restartPause);

        if (this.sessionUrl) {
            fetch(this.sessionUrl, {
                method: 'DELETE',
            })
                .then((res) => {
                    if (res.status !== 200) {
                        throw new Error('bad status code');
                    }
                })
                .catch((err) => {
                    console.log('delete session error: ' + err);
                });
        }
        this.sessionUrl = '';

        this.queuedCandidates = [];
    }
}

const onTransmit = (stream) => {
    document.getElementById('video').srcObject = stream;
    new Transmitter(stream);
};

const onPublish = () => {
    state = TRANSMITTING;
    render();

    const videoId = videoForm.device.value;
    const audioId = audioForm.device.value;

    if (videoId !== 'screen') {
        let video = false;
        if (videoId !== 'none') {
            video = {
                deviceId: videoId,
            };
        }

        let audio = false;

        if (audioId !== 'none') {
            audio = {
                deviceId: audioId,
            };

            const voice = audioForm.voice.checked;
            if (!voice) {
                audio.autoGainControl = false;
                audio.echoCancellation = false;
                audio.noiseSuppression = false;
            }
        }

        navigator.mediaDevices.getUserMedia({ video, audio })
            .then(onTransmit)
            .catch((err) => {
                state = ERROR;
                errorMessage = err.toString();
                render();
            });
    } else {
        navigator.mediaDevices.getDisplayMedia({
            video: {
                width: { ideal: videoForm.width.value },
                height: { ideal: videoForm.height.value },
                frameRate: { ideal: videoForm.framerate.value },
                cursor: "always",
            },
            audio: true,
        })
            .then(onTransmit)
            .catch((err) => {
                state = ERROR;
                errorMessage = err.toString();
                render();
            });
    }
};

const populateDevices = () => {
    return navigator.mediaDevices.enumerateDevices()
        .then((devices) => {
            for (const device of devices) {
                switch (device.kind) {
                case 'videoinput':
                    {
                        const opt = document.createElement('option');
                        opt.value = device.deviceId;
                        opt.text = device.label;
                        videoForm.device.appendChild(opt);
                    }
                    break;

                case 'audioinput':
                    {
                        const opt = document.createElement('option');
                        opt.value = device.deviceId;
                        opt.text = device.label;
                        audioForm.device.appendChild(opt);
                    }
                    break;
                }
            }

            if (navigator.mediaDevices.getDisplayMedia !== undefined) {
                const opt = document.createElement('option');
                opt.value = "screen";
                opt.text = "screen";
                videoForm.device.appendChild(opt);
            }

            if (videoForm.device.children.length !== 0) {
                videoForm.device.value = videoForm.device.children[1].value;
            }

            if (audioForm.device.children.length !== 0) {
                audioForm.device.value = audioForm.device.children[1].value;
            }
        });
    };

const populateCodecs = () => {
    const pc = new RTCPeerConnection({});
    pc.addTransceiver("video", { direction: 'sendonly' });
    pc.addTransceiver("audio", { direction: 'sendonly' });

    return pc.createOffer()
        .then((desc) => {
            const sdp = desc.sdp.toLowerCase();

            for (const codec of ['av1/90000', 'vp9/90000', 'vp8/90000', 'h264/90000']) {
                if (sdp.includes(codec)) {
                    const opt = document.createElement('option');
                    opt.value = codec;
                    opt.text = codec.split('/')[0].toUpperCase();
                    videoForm.codec.appendChild(opt);
                }
            }

            for (const codec of ['opus/48000', 'g722/8000', 'pcmu/8000', 'pcma/8000']) {
                if (sdp.includes(codec)) {
                    const opt = document.createElement('option');
                    opt.value = codec;
                    opt.text = codec.split('/')[0].toUpperCase();
                    audioForm.codec.appendChild(opt);
                }
            }

            pc.close();
        });
};

const initialize = () => {
    if (navigator.mediaDevices === undefined) {
        state = ERROR;
        errorMessage = 'can\'t access webcams or microphones. Make sure that WebRTC encryption is enabled.';
        render();
        return;
    }

    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then((stream) => {
            return Promise.all([
                populateDevices(),
                populateCodecs(),
            ])
                .then(() => {
                    // free the webcam to prevent 'NotReadableError' on Android
                    stream.getTracks()
                        .forEach(track => track.stop());

                    state = DEVICE;
                    render();
                });
        })
        .catch((err) => {
            state = ERROR;
            errorMessage = err.toString();
            render();
        });
};

document.getElementById("publish_confirm").addEventListener('click', onPublish);

initialize();

</script>

</body>
</html>
